<template>
    <popup
        :show="pupupShow"
        :clickModalClose="true"
        :title="'上下文预览（'+ context?.length +'条）'"
        width="600px"
        confirm-button-text=""
        cancel-button-text=""
        @close="handleClose()"
    >
        <div class="h-[60vh]">
            <el-scrollbar>
                <div class="py-4 px-6">
                    <div
                        v-for="(item, index) in context"
                        :key="index"
                        class="py-[6px] px-[10px] border border-br-light rounded mb-[10px]"
                    >
                        <div class="font-medium text-tx-primary mb-2">
                            {{ item.role }}
                        </div>
                        <div class="text-muted text-sm whitespace-pre-wrap">
                            {{ item.content }}
                        </div>
                    </div>
                </div>
            </el-scrollbar>
        </div>
    </popup>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        show: boolean,
        context?: any[],
    }>(),
    {
        show: false,
        context: () => []
    }
)

const emits = defineEmits<{
    (event: 'close'): void
}>()

const pupupShow = ref<boolean>(false)

const handleClose = () => {
    emits('close')
    pupupShow.value = false
}

watch(
    () => props.show,
    (val: boolean) => {
        pupupShow.value = val
    }, {
        immediate: true
    }
)
</script>
